/*
 * 企业学校权限设置
 * @Author: ice
 * @Date: 2019-07-19 10:35:26
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-08-06 19:20:47
 */

<template>
    <div class="container hire-school-auth-wrap">
        <div class="header">
            {{ formData.hire_company_name ? formData.hire_company_name : '学校企业权限设置' }}
        </div>
        <el-form
            ref="mainform"
            :model="formData"
            label-position="right"
            status-icon
            :rules="formRule"
            label-width="120px"
            :disabled="false"
            class="auth-form"
        >
            <div class="form-title">添加学校</div>
            <el-form-item
                class="task-form-item"
                size="small"
                prop="worker_name"
                label="添加学校:"
            >
                <i
                    class="el-icon-circle-plus-outline"
                    @click="showChooseSchool = true"
                />
            </el-form-item>
            <el-form-item
                class="task-form-item"
                size="small"
                prop="worker_name"
                label="所选学校:"
                v-if="selectedSchoolObjs.length > 0"
            >
                <el-tag
                    v-for="(item, index) in selectedSchoolObjs"
                    :key="item.id"
                    size="small"
                    closable
                    style="margin-right: 10px; margin-bottom: 10px;"
                    @close="fnDeleteSchool(index)"
                >{{ item.name }}</el-tag>
            </el-form-item>
            <div class="form-title">模块权限</div>
            <el-form-item
                class="task-form-item"
                size="small"
                prop="study_auth"
                label="学习模块:"
            >
                <el-radio-group v-model="formData.study_auth">
                    <el-radio :label="0">全国学校</el-radio>
                    <el-radio :label="1">已选学校</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                class="task-form-item"
                size="small"
                prop="market_auth"
                label="商城模块:"
            >
                <el-radio-group v-model="formData.market_auth">
                    <el-radio :label="0">全国学校</el-radio>
                    <el-radio :label="1">已选学校</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="check-group">
                <div class="check-group-title">
                    <i class="el-icon-caret-bottom" />工作模块:
                </div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="amb_auth"
                    label="校园大使:"
                >
                    <el-radio-group v-model="formData.amb_auth">
                        <el-radio :label="0">全国学校</el-radio>
                        <el-radio :label="1">已选学校</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="parttime_online_auth"
                    label="线上兼职:"
                >
                    <el-radio-group v-model="formData.parttime_online_auth">
                        <el-radio :label="0">全国学校</el-radio>
                        <el-radio :label="1">已选学校</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="parttime_offline_auth"
                    label="线下兼职:"
                >
                    <el-radio-group v-model="formData.parttime_offline_auth">
                        <el-radio :label="0">全国学校</el-radio>
                        <el-radio :label="1">已选学校</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="task_auth"
                    label="任务:"
                >
                    <el-radio-group v-model="formData.task_auth">
                        <el-radio :label="0">全国学校</el-radio>
                        <el-radio :label="1">已选学校</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="internship_auth"
                    label="毕业生招聘:"
                >
                    <el-radio-group v-model="formData.internship_auth">
                        <el-radio :label="0">全国学校</el-radio>
                        <el-radio :label="1">已选学校</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div class="operate">
                <el-button
                    size="small"
                    type="primary"
                    @click="fnSubmit()"
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保存&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
            </div>
        </el-form>
        <el-dialog
            title="选择学校"
            width="1048px"
            custom-class="choose-dialog"
            :visible.sync="showChooseSchool"
        >
            <el-cascader
                v-model="selectedCity"
                placeholder="请选择城市"
                :options="cities"
                :props="props"
                filterable
                size="small"
                style="width: 120px;"
                @change="fnChangeCity"
            />
            <el-input
                placeholder="请输入搜索内容"
                v-model.trim="searchKey"
                size="small"
                style="width: 380px"
                @keyup.native.enter="fnSearchSchool()"
            >
                <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="fnSearchSchool"
                />
            </el-input>
            <div class="splider" />
            <div class="school-list">
                <div
                    class="empty"
                    v-if="schoolList.length <= 0"
                >
                    请切换城市
                </div>
                <el-checkbox-group
                    v-model="selectedSchools"
                    size="small"
                    v-else
                >
                    <el-checkbox-button
                        v-for="(school, schoolIndex) in schoolList"
                        :label="school.id"
                        :key="schoolIndex"
                    >{{ school.name }}</el-checkbox-button>
                </el-checkbox-group>
            </div>
            <el-button
                type="primary"
                size="small"
                class="submit-btn"
                @click="showChooseSchool = false"
            >确定</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        var validateSchool = (rule, value, callback) => {
            if (!value) {
                callback(new Error(rule.message));
                return;
            } else if (value.length < 3 || !value[0] || !value[1] || !value[2]) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            hire_no: '',
            authResult: {},
            radio: 1,
            formData: {
                "school_ids": [],
                "study_auth": 0,
                "market_auth": 0,
                "amb_auth": 0,
                "task_auth": 0,
                "parttime_online_auth": 0,
                "parttime_offline_auth": 0,
                "internship_auth": 0,
                hire_company_name: '',
            },
            formRule: {
            },
            cities: [],
            selectedCity: [],
            //所有学校集合
            city_schools: {},
            // 弹窗当前显示学校集合
            schoolList: [],
            // 当前选中的学校
            selectedSchools: [1, 2],
            props: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            submitting: false,
            showChooseSchool: false,
            searchKey: '',
        };
    },
    computed: {
        selectedSchoolObjs() {
            let res = [];

            this.selectedSchools.forEach((item) => {
                /* eslint-disable */
          outer:
          for (let i in this.city_schools) {
            for (let j in this.city_schools[i]) {
              if (this.city_schools[i][j].id == item) {
                res.push(this.city_schools[i][j]);
                break outer;
              }
            }
          }
          /* eslint-enable */
            });
            return res;
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.hire_no = this.$route.query.hire_no ? this.$route.query.hire_no : '';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '企业注册数据',
                name: 'hireList',
            },
            {
                title: "企业学校权限设置",
            }
        ]);

        this.fnGetSchoolList();
        this.fnGetData();
    },
    methods: {
        fnChangeCity() {
            if (this.selectedCity.length >= 2) {
                this.schoolList = this.city_schools['city_' + this.selectedCity[1]];
                this.searchKey = '';
            } else {
                this.schoolList = [];
                this.searchKey = '';
            }
        },
        fnSearchSchool() {
            if (this.selectedCity.length >= 2) {
                this.schoolList = this.city_schools['city_' + this.selectedCity[1]].filter(item => {
                    if (!this.searchKey) {
                        return true;
                    }
                    return item.name.indexOf(this.searchKey) > -1;
                });
            } else {
                this.schoolList = [];
            }
        },
        fnGetSchoolList() {
            this.$post('/student/local_info%5Cschool_tree', {
            }, resp => {
                if (resp.code == 1) {
                    // 将学校与省市剥离,方便显示以及遍历
                    let tree = resp.data.tree;
                    let cityTmp = [];
                    let schoolTmp = {};

                    tree.forEach(item => {
                        let provinceTmp = {
                            id: item.id,
                            name: item.name,
                            children: []
                        };

                        if (item.children) {
                            item.children.forEach((city) => {
                                provinceTmp.children.push({
                                    id: city.id,
                                    name: city.name
                                });
                                schoolTmp['city_' + city.id] = city.children;
                            });
                        }
                        cityTmp.push(provinceTmp);
                    });

                    this.cities = cityTmp;
                    this.city_schools = schoolTmp;
                    this.selectedCity = [12, 88];
                    this.fnChangeCity();
                }
            });
        },
        fnGetData() {
            this.$post('/student/hire_school_auth%5Cget', {
                hire_no: this.hire_no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = resp.data;
                    this.selectedSchools = resp.data.school_ids;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnSubmit() {
            if (this.submitting) {
                return;
            }
            this.formData.school_ids = this.selectedSchools.join(',');
            this.$refs.mainform.validate(valid => {
                if (valid) {
                    this.submitting = true;


                    this.$post('/student/hire_school_auth%5Cset', {
                        hire_no: this.hire_no,
                        ...this.formData
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                center: true,
                                message: '修改成功'
                            });
                            this.$router.go(-1);
                        } else {
                            this.$message({
                                type: 'warning',
                                center: true,
                                message: resp.msg
                            });
                        }
                        this.submitting = false;
                    });

                }
            });
        },
        fnDeleteSchool(index) {
            this.selectedSchools.splice(index, 1);
        }
    },
};
</script>

<style lang="less" scoped>
  .margin-top {
    margin-top: 15px;
  }
  .hire-school-auth-wrap {
    margin: 15px;
    margin-bottom: 0;
    overflow: auto;
  }
  .header {
    padding: 15px;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    color: rgba(29, 32, 35, 1);
    line-height: 22px;
    margin-bottom: 1px;
  }
  .auth-form {
    padding: 15px;
    background: #fff;
  }
  .form-unit {
    margin-bottom: 40px;
  }
  .form-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 18px;
    padding: 0 10px;
    border-left: 2px solid #1890ff;
    margin-bottom: 20px;
  }
  .task-input {
    width: 435px !important;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .operate {
    width: 100%;
    margin-top: 30px;
    padding-left: 150px;
  }
  .splider {
    height: 1px;
    background-color: rgba(244, 244, 244, 1);
    margin: 30px -30px;
  }
  .submit-btn {
    margin: 30px auto 0;
    display: block;
  }
  .school-list {
    max-height: 310px;
    overflow: auto;
    .empty {
      text-align: center;
      color: #7e8993;
    }
  }
  .check-group {
    &-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      color: rgba(63, 69, 75, 1);
      line-height: 20px;
      margin-bottom: 10px;
      .el-icon-caret-bottom {
        font-size: 12px;
        margin-right: 10px;
        line-height: 12px;
        color: #88909c;
      }
    }
  }
  .el-icon-circle-plus-outline {
    font-size: 20px;
    line-height: 20px;
    color: #20a0ff;
    cursor: pointer;
  }
</style>
<style lang="less">
  .hire-school-auth-wrap {
    .el-checkbox-button {
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 0;
    }
    .el-checkbox-button:first-child .el-checkbox-button__inner {
      border-radius: 2;
    }
    .el-checkbox-button__inner {
      border-left: 1px solid #dcdfe6;
      font-size: 12px;
      font-weight: 400;
      color: rgba(126, 137, 147, 1);
      border-radius: 2px;
      position: relative;
    }
    .el-checkbox-button.is-checked .el-checkbox-button__inner {
      background-color: #fff;
      border: 1px solid rgba(32, 160, 255, 1);
      color: #20a0ff;
      box-shadow: none;
      overflow: hidden;
      &::after {
        content: " ";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 18px;
        background-image: url(//cdn.zsdx.cn/admin/images/common/checked.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  }
</style>
